<script setup>
import InputText from "../components/InputText.vue";
import InputSelect from "../components/InputSelect.vue";
import Button from "../components/Button.vue";
import IconSvg from "../components/IconSvg.vue";
import DataTable from "../components/DataTable.vue";
import Model from "../components/Model.vue";
import Message from "../components/Message/Message.js";
import PaginationBasic from "../components/PaginationBasic.vue";
import {
  RoleConstants
} from '../utils/constants.js';
import { ref, onMounted } from "vue"
//import axios from "axios";
import axios from "../axios/axios.js";
const showAddModel = ref(false)
const addInfo = ref({ role: 1 })
const isAdd = ref(false)
const tableData = ref()
const operateItem = ref()
// 列配置
const tableColumns = ref([
  { key: 'id', title: '编号', dataIndex: 'id', width: 60 },
  { key: 'role', title: '角色名', dataIndex: 'rolename' },
  { key: 'identificationcode', title: '标识', dataIndex: 'identificationcode' },
  { key: 'createtime', title: '创建时间', dataIndex: 'createtime' },
  { key: 'action', title: '操作', dataIndex: 'action' }
])
const pageData = ref({
  currentPage: 1,
  total: 0,
  pageSize: 10,
})
// 页码变化时触发
const handlePageChange = (page) => {
  console.log('当前页码：', page)
  pageData.value.currentPage = page
  // 这里可以调用接口加载对应页的数据
  getData()
}
const getRoleLabel = (roleValue) => {
  const role = RoleConstants.TYPE_MAP[roleValue]
  return role ? role : '未知角色';
};
const openAddModel = () => {
  isAdd.value = true
  showAddModel.value = true
}
const handleConfirm = () => {
  if (!addInfo.value.role || addInfo.value.role == "") {
    Message.warn('请选择角色')
    return
  }
  var role = RoleConstants.TYPE_MAP[addInfo.value.role]
  if (isAdd.value) {
    Message.success('正在添加')
    axios.post("/api/role/save", { rolename: role }).then(res => {
      if (res.data.Code == "200") {
        Message.success('添加成功')
        showAddModel.value = false
        isAdd.value = false
        getData()
      } else {
        Message.warn(res.data.Msg)
      }
    })
  } else {
    axios.post('/api/role/updatebyid', { id: operateItem.value.id, rolename: role }).then(res => {
      if (res.data.Code == "200") {
        Message.success('修改成功')
        showAddModel.value = false
        getData()
        operateItem.value = {}
      } else {
        Message.warn(res.data.Msg)
      }
    })

  }

}
const handleCancel = () => {
  addInfo.value = {}
  showAddModel.value = false
  isAdd.value = false
  operateItem.value = {}
}
const handleEdit = (item) => {
  addInfo.value.role = item.rolename
  showAddModel.value = true
  operateItem.value = item
}
const handleDelete = (item) => {
  axios.get('/api/role/delete?id=' + item.id).then(res => {
    if (res.data.Code == "200") {
      Message.success('删除成功')
      getData()
    } else {
      Message.warn(res.data.Msg)
    }
  })

}
const getData = () => {
  axios.get('/api/role/select?pageNum=' + pageData.value.currentPage + "&pageSize=" + pageData.value.pageSize).then(res => {
    tableData.value = res.data.Data.records
    pageData.value = {
      currentPage: pageData.value.currentPage === undefined ? 1 : pageData.value.currentPage,
      total: res.data.Data.total,
      pageSize: res.data.Data.size,
    }
  })
}

onMounted(() => {
  getData()

});
</script>
<template>
  <div class="bg-[white] w-full h-full pt-[40px] px-[40px] text-base flex flex-col">
    <!-- <div class="flex justify-start items-center">
      <InputSelect label="角色" class="w-[260px] mr-[20px]" v-model="searchInfo.role">
        <option value="">请选择角色</option>
        <option v-for="value in sourceRole" :value="value.value">{{ value.label }}</option>
      </InputSelect>
      <Button type="primary" content="查询" class="mr-[20px]" @click="getData">
        <template #icon>
          <IconSvg name="search" class="w-[18px] h-[18px]"></IconSvg>
        </template>
</Button>
<Button content="重置" class="mr-[20px]" @click="resetSearch">
  <template #icon>
          <IconSvg name="refresh" class="w-[15px] h-[15px]"></IconSvg>
        </template>
</Button>
</div> -->
    <div class="mt-[20px] flex-1 overflow-auto">
      <div class="flex justify-start items-center">
        <Button type="primary" content="新增" class="mr-[20px]" @click="openAddModel">
          <template #icon>
            <IconSvg name="add" class="w-[18px] h-[18px]"></IconSvg>
          </template>
        </Button>
      </div>

      <DataTable :dataSource="tableData" :columns="tableColumns" class="mt-[20px]">
        <template #role="{ item }">
          {{ getRoleLabel(item.role) }}
        </template>
        <template #action="{ item }">
          <a @click="handleEdit(item)" class="text-[#165dff] cursor-pointer">编辑</a>
          <a @click="handleDelete(item)" class="ml-2 text-red-500 cursor-pointer">删除</a>
        </template>
      </DataTable>

    </div>
    <div class="flex justify-end items-center my-4">
      <label class="font-medium">共{{ pageData.total }}条</label>
      <PaginationBasic :total="pageData.total" :page-size="pageData.pageSize" v-model:current="pageData.currentPage"
        @onPageChange="handlePageChange" />
    </div>
    <Model :show="showAddModel" @close="!showAddModel">
      <template #header>
        <h3>添加角色</h3>
      </template>
      <template #body>
        <div class="flex flex-col gap-[15px]">
          <InputSelect label="角色" class="w-[260px] mr-[20px]" v-model="addInfo.role">
            <option v-for="(typeName, typeId) in RoleConstants.TYPE_MAP" :value="typeId">{{ typeName }}</option>
          </InputSelect>
        </div>

      </template>
      <template #footer>
        <div class="flex justify-around">
          <Button content="取消" @click="handleCancel"></Button>
          <Button type="primary" content="确定" @click="handleConfirm"></Button>
        </div>
      </template>
    </Model>
  </div>
</template>

<style scoped></style>
